// http://localhost:3000/Expansion
import React, { useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { useWallet } from 'use-wallet';
import moment from 'moment';
import Button from '../../components/Button';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import Harvest from './components/Harvest';
import Harvest1 from './components/Harvest1';
import Stake from './components/Stake';
import Stake1 from './components/Stake1';
import { Switch } from 'react-router-dom';
import Page from '../../components/Page';
import useRedeemOnBoardroom from '../../hooks/useRedeemOnBoardroom';
import useRedeemOnBoardroom1 from '../../hooks/useRedeemOnBoardroom1';
import useStakedBalanceOnBoardroom from '../../hooks/useStakedBalanceOnBoardroom';
import useStakedBalanceOnBoardroom1 from '../../hooks/useStakedBalanceOnBoardroom1';

import config from '../../config';
import LaunchCountdown from '../../components/LaunchCountdown';
import Stat from './components/Stat';
import ProgressCountdown from './components/ProgressCountdown';
import useCashPriceInEstimatedTWAP from '../../hooks/useCashPriceInEstimatedTWAP';
import useTreasuryAmount from '../../hooks/useTreasuryAmount';
import Humanize from 'humanize-plus';
import { getBalance } from '../../utils/formatBalance';
import useTreasuryAllocationTimes from '../../hooks/useTreasuryAllocationTimes';
import Notice from '../../components/Notice';
import useBoardroomVersion from '../../hooks/useBoardroomVersion';
import useBoardroomVersion1 from '../../hooks/useBoardroomVersion1';

import banner_expend from '../../assets/image/banner_expend.png';
import h5banner_expend from '../../assets/image/h5banner_expend.png'; 
import shangsuo from '../../assets/image/img_lock.png';

const Boardroom: React.FC = () => {
  useEffect(() => window.scrollTo(0, 0));
  const { account } = useWallet();
  const { onRedeem } = useRedeemOnBoardroom();
  const { onRedeem1 } = useRedeemOnBoardroom1();
  const stakedBalance = useStakedBalanceOnBoardroom();
  const stakedBalance1 = useStakedBalanceOnBoardroom1();

  const cashStat = useCashPriceInEstimatedTWAP();
  const treasuryAmount = useTreasuryAmount();
  const scalingFactor = useMemo(
    () => (cashStat ? Number(cashStat.priceInDAI).toFixed(2) : null),
    [cashStat],
  );
  const { prevAllocation, nextAllocation } = useTreasuryAllocationTimes();
  // console.log(moment(prevAllocation).format('YYYY-MM-DD HH:mm:ss'),moment(nextAllocation).format('YYYY-MM-DD HH:mm:ss'),"显示的时间+++++++");
  
  const prevEpoch = useMemo(
    () =>
      nextAllocation.getTime() <= new Date().getTime()
        ? moment().startOf('day').add(16,'hours').toDate()
        : prevAllocation,
    [prevAllocation, nextAllocation],
  );
  const nextEpoch = useMemo(() => moment(prevEpoch).toDate(), [prevEpoch]);

  const boardroomVersion = useBoardroomVersion();
  const boardroomVersion1 = useBoardroomVersion1();
  const usingOldBoardroom = boardroomVersion !== 'latest';
  const migrateNotice = useMemo(() => {
    if (boardroomVersion === 'v2') {
      return (
        <StyledNoticeWrapper>
          <Notice color="green">
            <b>Please Migrate into New Boardroom</b>
            <br />
            The boardroom upgrade was successful. Please settle and withdraw your stake from the
            legacy boardroom, then stake again on the new boardroom contract{' '}
            <b>to continue earning sCASH seigniorage.</b>
          </Notice>
        </StyledNoticeWrapper>
      );
    }
    return <></>;
  }, [boardroomVersion]);

  // const migrateNotice1 = useMemo(() => {
  //   if (boardroomVersion === 'v2') {
  //     return (
  //       <StyledNoticeWrapper>
  //         <Notice color="green">
  //           <b>Please Migrate into New Boardroom</b>
  //           <br />
  //           The boardroom upgrade was successful. Please settle and withdraw your stake from the
  //           legacy boardroom, then stake again on the new boardroom contract{' '}
  //           <b>to continue earning sCASH seigniorage.</b>
  //         </Notice>
  //       </StyledNoticeWrapper>
  //     );
  //   }
  //   return <></>;
  // }, [boardroomVersion1]);

  const isLaunched = Date.now() >= config.boardroomLaunchesAt.getTime();
  if (!isLaunched) {
    return (
      <Switch>
        <Page>
          {/* <PageHeader
            icon={<img
              src={banner_blackhole}
              alt='logo'
              width={1920}
            />}
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_expend}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_expend}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
          <LaunchCountdown
            deadline={config.boardroomLaunchesAt}
            description=""
            descriptionLink=""
          />
        </Page>
      </Switch>
    );
  }

  return (
    <Switch>
      <Page>
      <StyleDiv1>
        <img
          src={banner_expend}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_expend}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
        {!!account ? (
          <StyledCards>
            {/* <PageHeader
              icon={<img
                src={banner_blackhole}
                alt='logo'
                width={1920}
              />}
              title=""
              subtitle=""
            /> */}
        
            {migrateNotice}
            <StyledHeader>
              <ProgressCountdown
                base={prevEpoch}
                deadline={nextEpoch}
                description="Next ERA"
              />
              <Stat
                icon="🚀"
                title={cashStat ? `$${cashStat.priceInDAI}` : '-'}
                description="sCASH Price (TWAP)"
              />
              {
                (scalingFactor && Number(scalingFactor) < 2)?
                <Stat
                icon="💥"
                title={scalingFactor ? `x${scalingFactor}` : '-'}
                description="Expansion Speed"
              />
              :
              <Stat
                icon="💥"
                title={ `x2.0`}
                description="Expansion Speed"
              />
              }
              
              <Stat
                icon="🪐"
                title={
                  treasuryAmount
                    ? `~$${Humanize.compactInteger(getBalance(treasuryAmount), 2)}`
                    : '-'
                }
                description="sFund Amount"
              />
            </StyledHeader>
            <StyledBoardroom>
              <StyledCardsWrapper>
                <StyledCardWrapper>
                <div style={{position:'absolute', top:'15px', left:'0px', background: '#fa4e32', zIndex: 0, padding: '10px 25px', borderTopRightRadius: 20, borderBottomRightRadius: 20, color: '#fff', fontSize: '14px'}}>x90%</div>
                  <Harvest />
                </StyledCardWrapper>
                <Spacer />
                <StyledCardWrapper>
                  <div style={{position:'absolute', display: 'flex', justifyContent: 'center', alignItems: 'center', top:'15px', left:'0px', background: '#fa4e32', zIndex: 0, padding: '10px 25px', borderTopRightRadius: 20, borderBottomRightRadius: 20, color: '#fff', fontSize: '14px'}}>
                  <img
                src={shangsuo}
                alt={`LOCK`}
                width={14}
                style={{ marginRight: '6px'}}
              />
                    24H</div>
                  <Stake />
                </StyledCardWrapper>
              </StyledCardsWrapper>
              <Spacer size="lg" />
              {!usingOldBoardroom && (
                // for old boardroom users, the button is displayed in Stake component
                <>
                  <div>
                    <Button
                      disabled={stakedBalance.eq(0)}
                      onClick={onRedeem}
                      text="结算 & 提取"
                    />
                  </div>
                  <Spacer size="sm" />
                </>
              )}
            </StyledBoardroom>

            <Div1>
            {/* <StyledHeader>
              <ProgressCountdown
                base={prevEpoch}
                deadline={nextEpoch}
                description="Next ERA"
              />
              <Stat
                icon="🚀"
                title={cashStat ? `$${cashStat.priceInDAI}` : '-'}
                description="sCASH Price (TWAP)"
              />
              <Stat
                icon="💥"
                title={scalingFactor ? `x${scalingFactor}` : '-'}
                description="Expansion Speed"
              />
              <Stat
                icon="🪐"
                title={
                  treasuryAmount
                    ? `~$${Humanize.compactInteger(getBalance(treasuryAmount), 2)}`
                    : '-'
                }
                description="sFund Amount"
              />
            </StyledHeader> */}
            <StyledBoardroom1>
              <StyledCardsWrapper>
                <StyledCardWrapper>
                  <div style={{position:'absolute', top:'15px', left:'0px', background: '#fa4e32', zIndex: 0, padding: '10px 25px', borderTopRightRadius: 20, borderBottomRightRadius: 20, color: '#fff', fontSize: '14px'}}>x10%</div>
                  <Harvest1 />
                </StyledCardWrapper>
                <Spacer />
                <StyledCardWrapper>
                <div style={{position:'absolute',display: 'flex', justifyContent: 'center', alignItems: 'center',  top:'15px', left:'0px', background: '#fa4e32', zIndex: 0, padding: '10px 25px', borderTopRightRadius: 20, borderBottomRightRadius: 20, color: '#fff', fontSize: '14px'}}>
                <img
                src={shangsuo}
                alt={`LOCK`}
                width={14}
                style={{ marginRight: '6px'}}
              />
                  72H</div>
                  <Stake1 />
                </StyledCardWrapper>
              </StyledCardsWrapper>
              <Spacer size="lg" />
              {!usingOldBoardroom && (
                // for old boardroom users, the button is displayed in Stake component
                <>
                  <div>
                    <Button
                      disabled={stakedBalance1.eq(0)}
                      onClick={onRedeem1}
                      text="Settle & Withdraw"
                    />
                  </div>
                  <Spacer size="sm" />
                </>
              )}
            </StyledBoardroom1>
            </Div1>
          </StyledCards>
        ) : (
          <UnlockWallet />
        )}
      </Page>
    </Switch>
  );
};

const UnlockWallet = () => {
  const { connect } = useWallet();
  return (
    <Center>
      <Button onClick={() => connect('injected')} text="连接钱包" />
    </Center>
  );
};

const StyledCards = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  border: 1px solid #fa4e32;
  margin-top: 20px;
  padding: 30px 30px;
  border-left: 10px solid #fa4e32;
  @media (max-width: 768px) {
    width: 100%;
    margin-top: 6px;
    padding: 0 0;
    border: none;
    box-sizing: border-box;
  }
`;

const Div1 = styled.div`
@media (max-width: 768px) {
  width: 100%;
}
`;

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  padding-bottom: 20px;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StyledBoardroom = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  border: 1px solid #46447d;
  padding: 10px 50px;
  padding-top: 30px;
  margin-top: 2px;
  @media (max-width: 768px) {
    width: 100%;
    padding: 10px 0px;
  }
`;

const StyledBoardroom1 = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  border: 1px solid #46447d;
  padding: 10px 50px;
  padding-top: 30px;
  margin-top: 20px;
  @media (max-width: 768px) {
    width: 100%;
    padding: 10px 0px;
  }
`;

const StyledHeader = styled.div`
  justify-content: center;
  display: flex;
  flex-direction: row;
  margin-bottom: ${(props) => props.theme.spacing[5]}px;
  width: 960px;

  > * {
    flex: 1;
    height: 84px;
    margin: 0 ${(props) => props.theme.spacing[2]}px;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    width: 100%;
  }
`;

const StyledNoticeWrapper = styled.div`
  width: 768px;
  margin-top: -20px;
  margin-bottom: 40px;
`;

const StyledCardsWrapper = styled.div`
  display: flex;
  width: 600px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const StyledCardWrapper = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  @media (max-width: 768px) {
    width: 80%;
  }
`;

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
`;

export default Boardroom;
